<template>
  <div class="productManager">
    <div class="breadcrumb">
      <el-icon>
        <Location />
      </el-icon>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>登录日志</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="content">
      <div class="top">
        <div>
          <el-button type="primary" @click="deleteLog()">清空登录日志</el-button>
        </div>
      </div>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" width="50" />
        <el-table-column prop="account" label="登录账户" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="email" label="联系方式" />
        <el-table-column prop="login_time" label="登录时间" />
      </el-table>
      <el-pagination
        :current-page="pageNum"
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>


<script setup>
import { ref, reactive, toRefs, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

import {
  getLoginLog, // 获取登录日志
  deleteLoginLog
} from "@/api/log";

import { useRouter } from "vue-router";
const router = useRouter();

// 调用store树中内容需要引入
import { useStore } from "vuex";
// 获取store
const store = useStore();

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  House,
  Message,
  Grid,
  Avatar,
  Position,
  ChatLineSquare,
  Notebook,
  UserFilled,
  User,
  Notification,
  ChatRound
} from "@element-plus/icons-vue";

const tableData = ref([]);
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);
const handleSizeChange = val => {
  pageSize.value = val;
  togetLoginLog();
};
const handleCurrentChange = val => {
  pageNum.value = val;
  togetLoginLog();
};
const togetLoginLog = () => {
  let data = {
    pageNum: pageNum.value,
    pageSize: pageSize.value
  };
  getLoginLog(data).then(res => {
    if (res.data.status != 0) {
      return ElMessage.error(res.data.message);
    }
    tableData.value = res.data.data.list;
    total.value = res.data.data.total;
  });
};
const deleteLog = () => {
  ElMessageBox.confirm("是否清空登录日志？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      deleteLoginLog().then(res => {
        if (res.data.status != 0) {
          return ElMessage.error(res.data.message);
        }
        togetLoginLog();
        ElMessage.success(res.data.message);
      });
    })
    .catch(() => {});
};
//声明周期函数，自动执行初始化
onMounted(() => {
  togetLoginLog();
});
</script>

<style scoped lang="scss">
.productManager {
}
.breadcrumb {
  display: flex;
  margin-bottom: 10px;
}
.content {
  background: #fff;
  .top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
  }
}
</style>